<!-- Home.vue -->
<template>
    <div id="container">
        <!-- 顶部 -->
        <el-row :gutter="24">
            <el-col :span="24">
                <div class="top">IKUN 2.0</div>
            </el-col>
        </el-row>

        <!-- 功能区切换 -->
        <el-row :gutter="12" class="section-tabs">
            <el-col v-for="(section, index) in sections" :key="index" :xs="12" :sm="8" :md="6" :lg="4">
                <el-button :type="currentSection === section.name ? 'primary' : 'default'"
                    @click="currentSection = section.name" class="w-full">
                    {{ section.label }}
                </el-button>
            </el-col>
        </el-row>

        <!-- 分区内容 -->
        <transition name="fade" mode="out-in">
            <div :key="currentSection" class="section-content">
                <el-row :gutter="24">
                    <el-col style="margin-bottom: 18px;" v-for="(item, index) in currentModules" :key="index" :xs="24"
                        :sm="12" :md="8" :lg="6">
                        <el-card :class="{ disabled: item.disabled }" shadow="hover" class="module-card"
                            @click="goTo(item.url)">
                            <h4>{{ item.title }}</h4>
                            <p>{{ item.description }}</p>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </transition>

        <div id="circle" ref="circle" class="circle bg-yellow-500"></div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import Kinet from 'kinet'

const router = useRouter()
const goTo = (url) => {
    if (url) router.push(url)
}

const sections = [
    { name: 'modelList', label: '功能区' },
    { name: 'functionList', label: '函数区' },
    { name: 'frameList', label: '框架区' },
    { name: 'expandList', label: '拓展区' },
]

const modulesMap = {
    modelList: [
        { title: 'Home', description: 'Home', url: "/home", },
        { title: '截取屏幕的一部分生成图片', description: '... ...', url: "/snipasteToPng", },
        { title: '图片的拖拉拽', description: '... ...', url: "/dragPic", },
        { title: '文件的预览与下载', description: '... ...', url: "/filePreview", },
    ],
    functionList: [
        { title: '常用工具函数', description: '常用工具函数', url: "/commonUtils", },
    ],
    frameList: [
        { title: '✨文字片段截取', description: '✨文字片段截取', url: "/reText", },
        { title: '二维码', description: '二维码', url: "/qrcode", },
        { title: '聊天输入框', description: '聊天输入框', url: "/chat", },
        { title: '✨大屏适配scale', description: '✨大屏适配scale', url: "/screen", },
    ],
    expandList: [
        { title: '动画交互', description: '动画交互', url: "/interaction", },
        { title: '禁止调试', description: '禁止调试', url: "/banDebugging", },
        { title: '首页-Tyz（开发中ing...）', description: '首页-Tyz（开发中ing...）', url: "/TyzHomeView", disabled: true },
    ],
}
// 默认显示的分区
const currentSection = ref('modelList')
// 根据当前分区获取对应的模块列表
const currentModules = computed(() => modulesMap[currentSection.value])

// 光点跟随鼠标
const kinet = ref(null)
const circle = ref(null)

onMounted(() => {
    kinet.value = new Kinet({
        acceleration: 0.02,
        friction: 0.25,
        names: ["x", "y"],
    })

    kinet.value.on('tick', (instances) => {
        if (circle.value) {
            circle.value.style.transform = `translate3d(${instances.x.current}px, ${instances.y.current}px, 0)`
        }
    })

    const updatePosition = (event) => {
        const rect = circle.value.getBoundingClientRect()
        kinet.value.animate('x', event.clientX - rect.width / 2)
        kinet.value.animate('y', event.clientY - rect.height / 2)
    }

    const handleResize = () => {
        // 重置位置到中心
        kinet.value.animate('x', window.innerWidth / 2)
        kinet.value.animate('y', window.innerHeight / 2)
    }

    window.addEventListener('mousemove', updatePosition)
    window.addEventListener('resize', handleResize)

    onUnmounted(() => {
        window.removeEventListener('mousemove', updatePosition)
        window.removeEventListener('resize', handleResize)
        // kinet.value.destroy()
    })
})
</script>

<style scoped lang="scss">
#container {
    position: relative;
    padding: 20px;
    background-color: #0f111a; // 荧光黑背景
    //   min-height: 100vh;
    color: #f0f0f0;
    overflow: hidden; // 防止内容溢出;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(30px);
        z-index: 0;
    }

    .circle {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        position: fixed; // 改为fixed定位
        top: 0;
        left: 0;
        transform: translate(-50%, -50%); // 确保中心点对准
        pointer-events: none;
        mix-blend-mode: screen;
        z-index: 10;
        box-shadow: 0px 0px 8px 0px #00f2ff inset, 0px 0px 24px 0px #00f2ff, 0px 0px 8px 0px #FFFFFF42;
    }

    .top {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 20px;
        color: #00f2ff; // 霓虹蓝
    }

    .section-tabs {
        margin-bottom: 30px;

        .el-button {
            background-color: #1f2230;
            border: 1px solid #2c2f3f;
            color: #a0c4ff;
            transition: all 0.3s ease;

            &:hover {
                border-color: #00f2ff;
                box-shadow: 0 0 10px #00f2ff80;
                color: #ffffff;
            }
        }

        .el-button--primary {
            background-color: #00f2ff;
            color: #000;
            font-weight: bold;
            box-shadow: 0 0 10px #00f2ff;
        }
    }

    .section-content {
        min-height: 300px;
    }

    .module-card {
        background-color: #1a1c23;
        border: 1px solid #2e303e;
        color: #e0e0e0;
        transition: all 0.3s ease;
        box-shadow: 0 0 5px transparent;
        cursor: pointer;

        &:hover {
            transform: translateY(-5px);
            box-shadow: 0 0 15px #00f2ff80;
        }

        &.disabled {
            opacity: 0.5;
            cursor: not-allowed; //不知道为什么没生效..........就先放着没管了...嘿嘿
            box-shadow: none !important;
            pointer-events: none;
        }

        h4 {
            color: #00f2ff;
        }
    }

    /* 动画过渡 */
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .fade-enter-from,
    .fade-leave-to {
        opacity: 0;
        transform: scale(0.98);
    }
}
</style>